<template>
  <div class="common-layout">
    <el-container>
      <el-header style="background: lightblue">Header</el-header>
      <el-container class="main" style="min-height: calc(100vh - 60px)">
        <el-aside width="200px" style="background: lightcoral">Aside</el-aside>
        <el-main>
          <!-- <el-row :gutter="20">
            <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
            <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
            <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
            <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 20px">
            <el-col :span="12">
              <div class="grid-content ep-bg-purple2" />
            </el-col>
            <el-col :span="12">
              <div class="grid-content ep-bg-purple2" id="main" />
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 20px">
            <el-col :span="24">
              <div class="grid-content ep-bg-purple2" id="main2" />
            </el-col>
          </el-row> -->
          <NewsIndex />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// import news from "@/mock/news.js";
// import { onMounted, ref, onBeforeUnmount } from "vue";
// import * as echarts from "echarts";

import NewsIndex from "../news/NewsIndex.vue";

export default {
  components: {
    NewsIndex,
  },
  // setup() {
  //   const currentPage = ref(1);
  //   let myChart;
  //   let myChart2;
  //   onMounted(async () => {
  //     const res = await news.getData({
  //       pageSize: 10,
  //       currentPage: currentPage.value,
  //       name: "xxx",
  //     });
  //     console.log(res);
  //   });

  //   // 图标
  //   onMounted(() => {
  //     myChart = echarts.init(document.getElementById("main"));
  //     // 绘制图表
  //     myChart.setOption({
  //       title: {
  //         text: "周访问数",
  //         top: 10,
  //         left: 10,
  //       },
  //       legend: {
  //         top: "middle",
  //         right: "6%",
  //         orient: "vertical",
  //         itemGap: 20,
  //       },
  //       series: [
  //         {
  //           type: "pie",
  //           radius: [30, 120],
  //           center: ["45%", "50%"],
  //           roseType: "area",
  //           itemStyle: {
  //             borderRadius: 8,
  //           },
  //           data: [
  //             { value: 40, name: "周一" },
  //             { value: 38, name: "周二" },
  //             { value: 32, name: "周三" },
  //             { value: 30, name: "周四" },
  //             { value: 28, name: "周五" },
  //             { value: 26, name: "周六" },
  //             { value: 22, name: "周日" },
  //           ],
  //         },
  //       ],
  //     });
  //     window.onresize = () => {
  //       myChart.resize();
  //     };
  //   });
  //   onBeforeUnmount(() => {
  //     myChart.dispose();
  //   });

  //   onMounted(() => {
  //     myChart2 = echarts.init(document.getElementById("main2"));
  //     // 绘制图表
  //     myChart2.setOption({
  //       title: {
  //         text: "年访问数",
  //       },
  //       tooltip: {
  //         trigger: "axis",
  //       },
  //       grid: {
  //         left: "3%",
  //         right: "4%",
  //         bottom: "3%",
  //         containLabel: true,
  //       },
  //       xAxis: {
  //         type: "category",
  //         boundaryGap: false,
  //         data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  //       },
  //       yAxis: {
  //         type: "value",
  //       },
  //       series: [
  //         {
  //           name: "Email",
  //           type: "line",
  //           smooth: true,
  //           data: [120, 132, 101, 134, 90, 230, 210],
  //         },
  //         {
  //           name: "Union Ads",
  //           type: "line",
  //           smooth: true,
  //           data: [220, 182, 191, 234, 290, 330, 310],
  //         },
  //         {
  //           name: "Video Ads",
  //           type: "line",
  //           smooth: true,
  //           data: [150, 232, 201, 154, 190, 330, 410],
  //         },
  //         {
  //           name: "Direct",
  //           type: "line",
  //           smooth: true,
  //           data: [320, 332, 301, 334, 390, 330, 320],
  //         },
  //       ],
  //     });
  //     window.onresize = () => {
  //       myChart2.resize();
  //     };
  //   });
  //   onBeforeUnmount(() => {
  //     myChart2.dispose();
  //   });

  // const data = [
  //   {
  //     title: "Email",
  //     list: [{
  //       date: "周一",
  //       count: 200
  //     }, {
  //       date: "周二",
  //       count: 230
  //     }]
  //   },
  //   {
  //     title: "xxx"
  //   }
  // ]
  // },
};
</script>

<style lang="less" scoped>
.common-layout {
  min-height: 100vh;
}
.ep-bg-purple {
  background: #eee;
  height: 100px;
}

.ep-bg-purple2 {
  background: #eee;
  height: 300px;
}
</style>
